<template>
  <container>
    <div class="result">
      <CloseOne theme="filled" :size="80" fill="#ff4d4f" />
      <h1 class="mt-20 mb-20">操作失败</h1>
      <p>请核对以下内容，处理完成后重新操作。</p>
      <div class="buttons">
        <el-button type="primary">返回上一页</el-button>
      </div>
      <div class="extra mt-20 p-20">
        <div class="header">为什么会失败？</div>
        <ul class="fail-list mt-20">
          <li>
            <CloseOne fill="#ff4d4f" />
            <span class="content">你收到律师函了么？就敢操作？</span>
            <a class="link">去收律师函<Right /></a>
          </li>
          <li>
            <CloseOne fill="#ff4d4f" />
            <span class="content">你不会rap啊！必须要会唱、跳、rap和篮球哦。</span>
            <a class="link">去学rap<Right /></a>
          </li>
          <li>
            <CloseOne fill="#ff4d4f" />
            <span class="content">你露出了鸡脚。</span>
            <a class="link">去隐藏鸡脚<Right /></a>
          </li>
        </ul>
      </div>
    </div>
  </container>
</template>

<script setup lang="ts">
import container from '@/components/container';
import { CloseOne, Right } from '@icon-park/vue-next';
</script>

<style scoped lang="scss">
.result {
  padding: 100px 0 50px;
  text-align: center;
  p {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
}
.extra {
  margin-top: 40px;
  background-color: #f6f6f6;
  position: relative;
  text-align: initial;

  .header {
    font-size: 18px;
    font-weight: 900;
  }

  .fail-list {
    font-size: 14px;
    padding: 0;

    li {
      line-height: 32px;
      display: flex;
      align-items: center;
      .content {
        margin: 0 10px 0 8px;
      }

      .link {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
